<template>
  <n-space vertical>
    <n-space justify="end">
      <n-button type="primary" size="small" @click="onAddHandle">
        <template #icon>
          <m-icon :icon="PlusOutlined"/>
        </template>
        新增
      </n-button>
    </n-space>
    <n-data-table
        remote
        bordered
        ref="table"
        :columns="columns.value"
        :data="tableData.value"
        :loading="loading"
        :row-key="(rowData) => rowData.id"
    />
  </n-space>
  <n-modal
      size="small"
      style="width: 600px;"
      v-model:show="showModal"
      preset="card">
    <template #header>
      <div>标题</div>
    </template>
    <div>内容</div>
    <template #action>
      <n-space justify="end">
        <n-button size="small" type="primary" @click="onSubmit">确认</n-button>
        <n-button size="small" @click="showModal = false">取消</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup>
import {NButton, NDataTable, NModal, NSpace, useDialog, useMessage} from 'naive-ui'
import {h, onMounted, reactive, ref} from "vue";
import {renderIcon, renderIconByName} from "../../../utils/index.js";
import {MIcon} from "../../../components/index.js";
import {DeleteOutlineOutlined, ModeEditOutlineOutlined, PlusOutlined} from '@vicons/material'
import {tree} from "../../../apis/sys/menu/index.js";

const dialog = useDialog()
const message = useMessage()
const loading = ref(false)
const isEdit = ref(false)
onMounted(async () => {
  const res = await tree()
  if (res.data.code === 1) {
    tableData.value = res.data.data
  }
})

const columns = reactive({
  value: [
    {
      title: '名称',
      key: 'menuName',
      align: 'center',
      width: 120,
      titleAlign: "center"
    },
    {
      title: '图标',
      key: 'iconName',
      align: 'center',
      titleAlign: "center",
      render(row) {
        return renderIconByName(row.iconName)
      }
    },
    {
      title: '类型',
      key: 'menuType',
      align: 'center',
      titleAlign: 'center'
    },
    {
      title: '路径',
      key: 'path'
    },
    {
      title: '组件',
      key: 'component'
    },
    {
      title: '权限',
      key: 'perms',
      align: 'center',
      titleAlign: "center"
    },
    {
      title: '排序',
      key: 'orderNum',
      align: 'center',
      titleAlign: "center"
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      titleAlign: "center"
    },
    {
      title: '操作',
      width: 100,
      titleAlign: 'center',
      render(row) {
        return h(NSpace, {justify: "center"}, {
          default: () => [
            h(
                NButton,
                {
                  circle: true,
                  type: 'warning',
                  size: 'small',
                  onClick: onEditHandle
                },
                {icon: renderIcon(ModeEditOutlineOutlined)}
            ),
            h(
                NButton,
                {
                  circle: true,
                  type: 'error',
                  size: 'small',
                  onClick: () => onDeleteHandle(row.id)
                },
                {icon: renderIcon(DeleteOutlineOutlined)}
            )
          ]
        })
      }
    },
  ]
})
const onSubmit = () => {
  showModal.value = false
}
const showModal = ref(false)
const onAddHandle = () => {
  showModal.value = true
  isEdit.value = false
}

const onEditHandle = () => {
  showModal.value = true
  isEdit.value = true
}

const onDeleteHandle = (id) => {
  dialog.warning({
    title: '警告',
    content: `你确定删除id=${id}的数据?`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      message.success('确定')
    },
    onNegativeClick: () => {
      message.error('取消')
    }
  })
}
const tableData = reactive({
  value: [
    {
      id: 1,
      name: '张三'
    },
    {
      id: 2,
      name: '张三'
    }
  ]
})

</script>

<style scoped>

</style>
